<!doctype html>
<html lang="en">
<head>
    <title>IT老齐-聊编程,重实战,讲干货,精剪辑,说人话</title>
    <meta name="description" content="IT老齐,聊编程,重实战,讲干货,说人话,不扯淡!"/>
    <link rel="shortcut icon" href="https://scdn.itlaoqi.com/images/favicon.ico"/>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://scdn.itlaoqi.com/resources/bootstrap4/css/bootstrap.css">
    <link rel="stylesheet" href="https://scdn.itlaoqi.com/resources/css/base.css">
    <script src="https://scdn.itlaoqi.com/resources/jquery.3.3.1.min.js"></script>
    <script src="https://scdn.itlaoqi.com/resources/bootstrap4/js/bootstrap.min.js"></script>
    <script src="https://scdn.itlaoqi.com/resources/art-template-web.4.8.1.js"></script>

    <style>

        .fc-light {
            color: #999;
        }

        .bg-f5 {
            background-color: #f5f5f5;
        }

        .sub-title {
            color: #999;
            font-size: 80%;
        }

        .ltbradius {
            border-top-left-radius: 0.75rem;
            border-bottom-left-radius: 0.75rem;
        }

        .rtbradius {
            border-top-right-radius: 0.75rem;
            border-bottom-right-radius: 0.75rem;
        }

        .scol-7 {
            -ms-flex: 0 0 62%;
            flex: 0 0 62%;
            max-width: 62%;
        }

        .series {
            -webkit-transition: -webkit-box-shadow 0.2s linear;
            transition: box-shadow 0.2s linear;
        }

        .series:hover {
            -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
    </style>
    <!-- 定义了ArtTemplate模板，模板id=tpl -->
    <script type="text/html" id="tpl">
        <div class="col-3 pt-3 pb-3 pl-0">
            <div class="series card w-100">
                <a href="/article/{{articleId}}.html">
                    <img src="{{video.cover}}"
                         class="card-img-top w-100" style="height: 149px"
                         alt="{{video.cover}}">
                </a>
                <div class="card-body">
                    <div class="card-title " style="height: 40px">
                        <a href="/article/{{articleId}}.html">{{title}}</a>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </script>
</head>
<body style="background-color: #f5f5f5">
<nav class="navbar fixed-top navbar-light bg-white shadow">
    <div class="col-10">
        <ul class="nav pt-2 pb-2">
            <li class="nav-item">
                <a href="/">
                    <img src="http://cdn.itlaoqi.com/images/footer_logo.png" alt="IT老齐" class="mt-1"
                         style="width: 240px">
                </a>
            </li>
        </ul>
    </div>
</nav>
<div class="fix-container pt-5 mt-5">
    <div class="row " id="articleList">

    </div>
</div>

<nav class="navbar mt-1 navbar-light bg-dark" style="height: 100px">
    <div class="container footer">
        <div class="row w-100">
            <div class="col-6">
                <div class="row links w-100 pt-1">
                    <a href="#" rel="nofollow">关于我们</a> | <a href="#" rel="nofollow">版权声明</a> | <a href="#"
                                                                                                   rel="nofollow">联系我们</a>
                    <a href="#" rel="nofollow">帮助中心</a>
                </div>
            </div>
        </div>
    </div>
</nav>
<script>
    //请求附加JWT
    let header = {};
    if (localStorage.token != null) {
        header.token = localStorage.token;
    }
    $.ajax({
        url: "http://127.0.0.1:9000/article-service/article/list",
        type: "get",
        dataType: "json",
        headers: header,
        success: function (json) {
            var articleList = json.data;
            for (let i = 0; i < articleList.length; i++) {
                var article = articleList[i];
                // console.log(article);
                var html = template('tpl', article); //模板与数据结合生成html
                // console.log(html);
                $("#articleList").append(html);
            }
        }
    });
</script>
</body>
</html>